<template>
<div class="main main-user-identify" id="main_check_identify">
  <div class="main-hd">
    <h2>{{ $t("m.cstj") }}</h2>
    <div class="main-hd">
      <div class="content-wrap">
        <div class="form-inline">
          <div>
            <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" v-bind:placeholder="$t('m.spsj')" style="width: 200px;vertical-align: middle;" class="mr10 mb10"></DatePicker>
            <!-- <Select
                v-model="chuShenModel"
                v-bind:placeholder="$t('m.shry')"
                class="w120 mr10 mb10"
                filterable
              >
                <Option :value="''">{{ this.$t("m.entire") }}</Option>
                <Option
                  v-for="(item, index) in chuShenList"
                  :key="index"
                  :value="item.account"
                  >{{ item.account }}</Option
                >
              </Select> -->
          </div>
          <div style="margin-top: 20px">
            <table class="table table-hover table-condensed" border>
              <thead>
                <tr>
                  <td>{{ $t("m.shry") }}</td>
                  <td>{{ $t("m.fc") }}</td>
                  <td>{{ $t("m.pn") }}</td>
                  <td>{{ $t("m.dàishěnhé") }}</td>
                  <td>{{ $t("m.refuseN") }}</td>
                  <td>{{ $t("m.hangUpNum") }}</td>
                  <td>{{ $t("m.prate") }}</td>
                  <td>{{ $t("m.rLnum") }}</td>
                  <td>{{ $t("m.npaybackNum") }}</td>
                  <td>{{ $t("m.npaybackRate") }}</td>
                </tr>
              </thead>
              <tr v-if="adminAllInfo">
                <td>{{ adminAllData.checkerFirst }}</td>
                <td>{{ adminAllData.machinePassedCount }}</td>
                <td>{{ adminAllData.passCount }}</td>
                <td>{{ adminAllData.pendingCount }}</td>
                <td>{{ adminAllData.rejectCount }}</td>
                <td>{{ adminAllData.hangingCount }}</td>
                <td>{{ adminAllData.passRate }}%</td>
                <td>{{ adminAllData.paidCount }}</td>
                <td>{{ adminAllData.noRepaidCount }}</td>
                <td>{{ (adminAllData.noRepaidRate * 100).toFixed() }}%</td>
              </tr>

              <tr v-for="item in List" class="identifyList">
                <td>{{ item.checkerFirst }}</td>
                <td>{{ item.machinePassedCount }}</td>
                <td>{{ item.passCount }}</td>
                <td>{{ item.pendingCount }}</td>
                <td>{{ item.rejectCount }}</td>
                <td>{{ item.hangingCount }}</td>
                <td>{{ item.passRate }}%</td>
                <td>{{ item.paidCount }}</td>
                <td>{{ item.noRepaidCount }}</td>
                <td>{{ (item.noRepaidRate * 100).toFixed() }}%</td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <h2 class="titleColor">{{ $t("m.lìshǐshěnhéqīngdān") }}</h2>
      <div style="margin: 0px 20px">
        <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="historyTimeChange" v-bind:placeholder="$t('m.spsj')" style="width: 200px;vertical-align: middle;" class="mr10 mb10"></DatePicker>

        <table class="table table-hover table-condensed" border>
          <thead>
            <tr>
              <td>{{ $t("m.userNumber") }}</td>
              <td>{{ $t("m.userName") }}</td>
              <td>{{ $t("m.shēnfènzhènghào") }}</td>
              <td>{{ $t("m.phone") }}</td>
              <td>{{ $t("m.orderGid") }}</td>
              <td>{{ $t("m.applyTime") }}</td>
              <td>{{ $t("m.loanMount") }}</td>
              <td>{{ $t("m.loanTimeLimit") }}</td>
              <td>{{ $t("m.csry") }}</td>
              <td style="width:100px;">{{ $t("m.operate") }}</td>
            </tr>
          </thead>
          <tr v-for="item in historyListData" class="identifyList" :dataid="item.id">
            <td>{{ item.userId }}</td>
            <td>{{ item.fullName }}</td>
            <td>{{ item.idNumber }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.orderGid }}</td>
            <td>{{ item.ctime }}</td>
            <td>{{ item.loanAmount }}</td>
            <td>{{ item.loanDays }}</td>
            <td>{{ item.checkerFirst }}</td>

            <td>
              <button class="btn btn-primary" @click="historyIndexQuery(item.userId, item.orderGid)">
                详情
              </button>
            </td>
          </tr>
        </table>

        <div class="historyPage_box">
          <Page :total="historyPageSum" :current.sync="historyPages" :page-size-opts="[1, 10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="historyWritePage" @on-page-size-change="historyClickPage" style="margin: 15px 0;"></Page>
        </div>
      </div>
    </div>
  </div>

  <!--用户详细资料end-->
  <Modal v-model="baseInfoBox" :title="$t('m.sUI')" width="70%">
    <base-info :userId="baseInfoUserId" :orderGid="baseInfoOrderGid" :baseType="baseInfoType" v-if="baseInfoBox"></base-info>
    <div slot="footer"></div>
  </Modal>
</div>
</template>

<script>
import BaseInfo from './common/baseInfo'
export default {
  name: "chuShen",
  components: {
    BaseInfo
  },
  data() {
    return {
      baseInfoBox: false,
      baseInfoOrderGid: '',
      baseInfoUserId: '',
      baseInfoType: '2',
      chuShenModel: '',
      chuShenList: [],
      disDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      historyListData: [],
      histotyTimeArray: [],
      historyPageSize: 10,
      historyPageSum: 0,
      historyPages: 1,
      beginDate: '',
      endDate: '',
      List: [],
      adminAllData: [],
      adminAllInfo: false,
      firstChecker: '',
      noRepaidAmount: '',
      data1: '',
      data2: '',
      historyBox: false,
      data110: [],
      data122: [],
      upremark: '',
      contactInfo: [],
      btnLoading: false,
      checkLogList: [],
      callLog: [],
      userId: '',
      orderGid: '',
    }
  },
  methods: {
    // 历史请求列表
    historyList(pageNumber = 1) {

      let param = {},
        query = ''
      param.pageNumber=pageNumber,
      param.pageSize=this.historyPageSize,
      param.timeFirstDateBegin=this.histotyTimeArray[0],
      param.timeFirstDateEnd=this.histotyTimeArray[1]
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/check/history-list?${query}`
      this.$http.get(url).then((res) => {
          if (res.data.code == 0) {
            this.historyListData = res.data.result.list;
            this.historyPageSum = res.data.result.size            
            if (!this.historyPageSum) {
              this.$Message.warning(this.$t("m.zhànshíméiyǒushùjù"));
              return
            }
          } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      });
    },
    // 点击查看信息详情页面请求
    historyIndexQuery(userId, orderGid) {
      this.baseInfoOrderGid = orderGid
      this.baseInfoUserId = userId
      this.baseInfoBox = true
    },
    getList() {

      let param = {},
        query = '';
      param.checkerFirst = this.chuShenModel
      param.applyDateBegin = this.beginDate
      param.applyDateEnd = this.endDate

      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url1 = `/api/laocai/check/statis/first?${query}`
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          this.List = res.body.result.list
          if (res.body.result.total) {
            res.body.result.total.passRate = (res.body.result.total.passRate * 100).toFixed(2)
            this.adminAllData = res.body.result.total            
          }
          this.List.forEach((value, index, array) => {
            array[index].passRate = (array[index].passRate * 100).toFixed(2)
          })
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));

      });

    },
    getchuShenList() {
      this.$http.get('/api/laocai/sys/account/list?roleName=checker').then((res) => {
        if (res.body.code == 0) {
          this.chuShenList = res.body.result
        }else{
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    historyWritePage(index) {
      this.historyList(index)
    },
    historyClickPage(index) {
      this.historyPageSize = index
      this.historyList()

    },
    historyTimeChange(e) {
      this.histotyTimeArray = e
      this.historyList()
    },
    timeChange(e) {
      if (typeof(e) == "undefined") {
        this.beginDate = e[0];
      } else if (typeof(e) == "object") {
        this.beginDate = e[0];
        this.endDate = e[1];
        this.getList();
        // this.getUserListByCondition();
      }
    },
  },
  mounted() {
    this.getList();
    this.historyList()
    this.getchuShenList();
    if (sessionStorage.getItem('roles') == 'admin') {
      this.adminAllInfo = true
    }
  },
  watch: {
    chuShenModel: function() {
      this.getList();
    },
  }
}
</script>

<style scoped>
.titleColor {
  color: #515a6e;
  /* margin: 25px 0px 20px 0px; */
}

.w120 {
  width: 120px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.historyPage_box {
  float: right;
}

.details_head_title {
  height: 40px;
  font-size: 18px;
  font-weight: 700;
}

.details_content {
  float: left;
  margin-top: 20px;
  width: 100%;
}

.ivu-modal-footer {
  border: 0px;
}

.ivu-modal-body {
  height: auto;
  overflow: hidden;
}

.passButton .btn-success {
  margin-left: 80px;
  margin-left: 13%;
}
</style>